<template>
	<view class="userLayout pageBg">
		<view class="" :style="{ height: getNavBarHeight() + 'px' }">
			
		</view>
		
		<view class="userInfo">
			<view class="avatar">
				<image src="@/static/logo.png" mode=""></image>
			</view>
			<view class="ip">{{ userInfo.IP }}</view>
			<view class="address">来自于： {{ userInfo.address?.province }}</view>
		</view>
		
		<view class="section">
			<view class="list">
				<row-item :type="'download'" :name="'我的下载'">
					<template #icon><uni-icons type="download-filled" size="20" color="#28b389"></uni-icons></template>
					<template #text>我的下载</template>
					<template #value>{{ userInfo.downloadSize }}</template>
				</row-item>
				
				<row-item  :type="'score'" :name="'我的评分'">
					<template #icon><uni-icons type="star-filled" size="20" color="#28b389"></uni-icons></template>
					<template #text>我的评分</template>
					<template #value>{{ userInfo.scoreSize }}</template>
				</row-item>
				
				<row-item>
					<template #icon><uni-icons type="chatboxes-filled" size="20" color="#28b389"></uni-icons></template>
					<template #text>联系客服</template>
					<template #customer-service>
					<!-- 方法1：判断环境 -->
					<!--
						<button open-type="contact" class="contact-btn" v-if="uni.$platform === 'mp-weixin'">联系客服</button>
						<button v-if="uni.$platform === 'h5'">拨打电话</button>
					 -->
					 
					 <!-- 方法2：条件编译 -->
					 <!-- #ifdef MP-WEIXIN -->
					 	<button open-type="contact" class="contact-btn">联系客服</button>
					 <!-- #endif -->
					 <!-- #ifdef H5 -->
						<button @click="callPhone">拨打电话</button>
					 <!-- #endif -->
					 
					</template>
				</row-item>
			</view>
		</view>
		
		<view class="section">
			<view class="list">
				<row-item>
					<template #icon><uni-icons type="notification-filled" size="20" color="#28b389"></uni-icons></template>
					<template #text>订阅更新</template>
				</row-item>
				
				<row-item>
					<template #icon><uni-icons type="flag-filled" size="20" color="#28b389"></uni-icons></template>
					<template #text>常见问题</template>
				</row-item>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getNavBarHeight } from '@/utils/system.js'
import { userInfoAPI } from '@/api/user.js'
import { onBeforeMount, ref } from 'vue'

const userInfo = ref({})

const callPhone = () => {
	uni.makePhoneCall({
		phoneNumber: '15305207313'
	})
}

onBeforeMount(async () => {
	uni.showLoading({ title: '加载中' })
	const result = await  userInfoAPI()
	uni.hideLoading()	
	userInfo.value = result.data
})
</script>

<style lang="scss" scoped>
.userLayout {
	
	& > .userInfo {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 50rpx 0;
		
		.avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		.ip {
			font-size: 44rpx;
			color: #333;
			padding: 20rpx 0 5rpx;
		}
		
		.address {
			font-size: 28rpx;
			color: #aaa;
		}
	}
	
	& > .section {
		width: 690rpx;
		margin: 50rpx auto;
		border: 1px solid #eee;
		border-radius: 10rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
		
		.list {
		}
	}
	
	
}
</style>
